<template>
    <div class="tabpie-box">
        <div class="left">
            <p v-for="(item,index) in info[activeName]" :key="index" @click="click(item)" :class="item==title?'active':''">{{item}}</p>
        </div>
        <div class="right">
            <div style="display:flex;justify-content: flex-end;">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane :label="item.name" :name="item.value" v-for="(item,index) in data"
                        :key="item.name"></el-tab-pane>
                </el-tabs>
            </div>
            <EchartsPieLabel class="pie" :data="pie" :label="title"></EchartsPieLabel>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'Tabpie',
        components: {

        },
        props: {
            data: {
                // 返回的数据
                type: Array,
                default: function () {
                    return [];
                },
            },
        },
        data() {
            return {
                title: "行政街区",
                activeName: "a",
                info: {
                    a: ['振华路街道', '沧口街道', '兴华路街道', '兴城路街道', '李村街道', '虎山路街道', '浮山路街道', '楼山街道', '九水街道', '世园街道'],
                    b: ['餐饮', '娱乐', '教育', '健康', '商场', '酒店'],
                    c: ['交通大队', '公安局', '城管局', '财政局', '卫生局', '自来水公司'],
                },
                pie: [
                    { name: "支付情况", value: 54 },
                    { name: "公共厕所", value: 34 },
                    { name: "停车场", value: 42 },
                    { name: "铁路干线", value: 23 },
                    { name: "公交站", value: 23 },
                    { name: "水电网", value: 24 },
                    { name: "治安情况", value: 14 },
                    { name: "城市管理", value: 43 },
                ]

            };
        },
        created() { },
        mounted() { },
        methods: {
            handleClick({ label }) {
                this.title = label
                this.initPie()
            },
            click(e){
                this.title = e
                this.initPie()
            },
            initPie(){
                for(let item of this.pie){
                    item.value=item.value = (Math.round(Math.random() * 100)).toFixed(0)
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .tabpie-box {
        width: 100%;
        height: 100%;

        .left {
            float: left;
            padding-left: 20px;
            width: 25%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;

            p {
                cursor: pointer;
                color: #fff;
                margin-bottom: 5px;
                font-size: 16px;
                letter-spacing: 2px;
            }
            .active {
                color:#00cdf9;
               
            }
        }

        .right {
            float: right;
            width: 75%;
            height: 100%;

            .pie {
                width: 100%;
                height: calc(100% - 40px);
            }
        }
    }
</style>
<style lang="scss">
    .tabpie-box {
        .el-tabs__item {
            padding: 0 20px !important;
            color: #fff;
            font-weight: bold;
            font-size: 16px !important;
        }

        .el-tabs__item.is-active {
            color: #00cdf9;
        }
    }
</style>